import Vue from 'vue';
import router from './config/router';
import './common.scss';
import * as all from '../index.js';

Vue.config.productionTip=false;
Vue.config.performance=true;

window.all=all;

new Vue({
	router,
	data(){
		return {
			anchors:[],
			theme:'default',
			platform:'pc',
			platformOptions:[
				'pc',
				'app',
			],
		};
	},
	computed:{
		themeOptions(){
			if(this.platform==='pc'){
				return [
					'default',
					'fk',
					'red',
				];
			}else if(this.platform==='app'){
				return [
					'default',
				];
			}
			return [
				'default',
			];
		},
		globalClass(){
			return [
				this.theme+'-theme',
				this.platform+'-platform',
			];
		},
	},
	watch:{
		theme:{
			handler(val){
				const {hash,query}=this.$route;
				if(val!==query.theme){
					this.$router.push({
						query:Object.assign({},query,{theme:val}),
						hash,
					});
				}
				Vue.prototype.$baseui_theme=val;
			},
		},
		platform(val){
			const {query}=this.$route;
			if(val!==query.platform){
				const extend={platform:val};
				if(this.themeOptions.indexOf(query.theme)===-1){
					extend.theme='default';
				}
				this.anchors=[];
				this.$router.push({
					path:'/',
					query:extend,
				});
			}
		},
		$route:{
			handler(newRoute){
				const {hash,query}=newRoute;
				if(!query.theme||!query.platform){
					this.$router.push({
						query:Object.assign({},query,{
							theme:this.theme||'default',
							platform:this.platform||'pc',
						}),
						hash,
					});
					return;
				}
				this.theme=query.theme;
				this.platform=query.platform;
			},
		},
		globalClass:{
			handler(val,old){
				const classList=document.body.classList;
				if(old){
					for(let i=0;i<old.length;++i){
						classList.remove(old[i]);
					}
				}
				for(let i=0;i<val.length;++i){
					classList.add(val[i]);
				}
			},
			immediate:true
		},
	},
	created(){
		Vue.prototype.$baseui_theme=this.theme;
	},
	render(h){
		return h('router-view');
	}
}).$mount('#app');
